<template>
  <div>
    <div class="band">
      <img :src="$api.imgUrl + JSON.parse(info.product_img)[0]" alt="" />
      <span>{{ info.product_name }}</span>
    </div>
    <div class="comment">
      <textarea
        v-model="comment"
        placeholder="商品怎么样？分享给想买的他们吧~~"
      ></textarea>
      <ul class="image-reader-list">
        <li
          class="image-reader-item"
          v-for="(img, index) in imageList['reader0']"
          :key="index"
          :style="{
            backgroundImage: `url(${$api.userImg}/uploads/user/${img})`,
            backgroundPosition: 'center center',
            backgroundRepeat: 'no-repeat',
            backgroundSize: 'cover'
          }"
        >
          <md-tag
            class="image-reader-item-del"
            size="small"
            shape="quarter"
            fill-color="#111A34"
            type="fill"
            font-color="#fff"
            @click.native="onDeleteImage('reader0', index)"
          >
            <md-icon name="close"></md-icon>
          </md-tag>
        </li>
        <li class="image-reader-item add">
          <md-image-reader
            name="reader0"
            @complete="onReaderComplete"
            is-multiple
          ></md-image-reader>
          <md-icon name="camera" size="md" color="#666"></md-icon>
          <p>添加图片</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Icon, ImageReader, Tag } from "mand-mobile";
export default {
  name: "addComment",
  components: {
    [Icon.name]: Icon,
    [ImageReader.name]: ImageReader,
    [Tag.name]: Tag
  },
  props: {
    info: {
      type: Object
    }
  },
  data() {
    return {
      comment: "",
      imageList: {}
    };
  },
  methods: {
    onReaderComplete(name, { file }) {
      let formData = new FormData();
      formData.append("file", file, file.name);
      this.$ajax.upload(this.$api.uploadFile, formData).then(res => {
        const demoImageList = this.imageList[name] || [];
        demoImageList.push(res.data.url);
        this.$set(this.imageList, name, demoImageList);
      });
    },
    onDeleteImage(name, index) {
      const demoImageList = this.imageList[name] || [];
      demoImageList.splice(index, 1);
      this.$set(this.imageList, name, demoImageList);
    },
    getInfo() {
      return {
        product_id: this.info.product_id,
        content: this.comment,
        url: JSON.stringify(this.imageList.reader0)
      };
    }
  }
};
</script>

<style scoped lang="stylus">
.band{
  padding 16px 24px
  background white
  font-size:24px;
  font-family:PingFang-SC-Regular;
  font-weight:400;
  color:rgba(102,102,102,1);
  border-bottom 1px solid #E6E6E6
  img{
    width 66px;
    height 66px;
    vertical-align middle
    margin-right 17px
  }
}
  .comment{
    background white
    textarea{
      padding 16px 24px
      width 100%;
      min-height 270px;
      border none;
      font-size 22px
      outline none
    }
  }
.image-reader-list
  width 100%
  float: left
  padding 16px 24px
  background white
  .image-reader-item
    position relative
    float left
    width 21.5%
    padding-bottom 21.5%
    margin-bottom 2%
    margin-right 2%
    background #FFF
    box-shadow 0 5px 20px rgba(197, 202, 213, .25)
    box-sizing border-box
    list-style none
    border-radius 4px
    background-size cover
    overflow hidden
    &:nth-of-type(4n)
      margin-right 0
    &.add
      border: 1px dashed #666
      .md-icon
        position absolute
        top 40%
        left 50%
        transform translate(-50%, -50%)
        color #666
      p
        position absolute
        top 50%
        left 0
        width 100%
        margin-top 15px
        font-size 22px
        color #666
        text-align center
    .image-reader-item-del
      position absolute
      top 0
      right 0
      z-index 3
      opacity .8
      .md-icon-close
        font-size 24px
</style>
